<template>
   <div class="myfind">
      <div class="top_gz">
        规则
      </div>
      <div class="radio">
          <video autoplay="autoplay"  @click="shows=!shows" data-v-2b0b770c=""  contorol="contorol" src="https://app-builder-resource.oss-cn-shanghai.aliyuncs.com/prod/uploadckjn5re0ra.mp4

"  poster="https://fuss10.elemecdn.com/7/61/25ef496d5f4258b694918f76d265djpeg.jpeg" >
          </video>
          <div  v-show="shows" class="autopays">
            <p></p>
          </div>
      </div>
   </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      shows:true,
      pro:false
    }
  },
  methods:{
  }
};
</script>
<style scoped >
.myfind {
  position:relative;
  background-image:url("../../static/images/bg.png");
  background-color: #102950;
  background-repeat: no-repeat;
  background-position:top center;
  background-size: 100% 100%;
  height: 100%;
  width: 100%;
  box-sizing:border-box;
}
.top_gz{
  right:0;
  box-sizing:border-box;
  position:absolute;
  border:1px solid #fff;
  text-align:center;
  color: #fff;
  font-size:15px;
  height: 36px;
  border-radius:20px 0px 0px 20px;
  line-height: 36px;
  width:56px;
  padding-left:10px;
  background: #21161a;
  opacity:0.7;
  box-shadow:0 0 6px #fff;
}
video{
  width:80%;
  position:absolute;
  top:60%;
  left:50%;
  margin-left:-128px;
}
.autopays{
  left:50%;
  top:50%;
  margin-left:-24px;
  margin-top:18%;
  position:absolute;
  width:56px;
  height:56px;
  background: #160b0f;
  opacity:0.6;
  border-radius:50%;
  border:2px solid #fff;
  box-shadow:0 0 10px #fff;
}
.autopays p{
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-10px;
  margin-left:-5px;
  width:10px;
  border-left:16px solid #fff;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;

}
.radio{
  position:relative;
  width:100%;
  height:168px;
}
</style>
